import React, { Component } from "react";
import "../assets/css/Sort.css";
import Top from "../component/Top.jsx";
import { cartadd, getcate, getgoods } from '../utils/api.js';

export default class sort extends Component {
    constructor() {
        super()
        this.state = {
            title: '商品分类',
            cateList: [],
            goodsList:[],
            catename:'',
        }
    }
    async componentDidMount() {
        let cateRes = await getcate()

        if (cateRes.code == 200) {
            this.setState({
                ...this.state,
                cateList: cateRes.list,
                catename: cateRes.list[0].catename,
            })
        }
        this.getgoodsList(1)
    }
    async getgoodsList(fid) {
        let goodsRes = await getgoods(fid)

        if (goodsRes.code == 200) {
            this.setState({
                ...this.state,
                goodsList:goodsRes.list,
            })
        }
    }
    changeGoods(fid,i) {
        this.getgoodsList(fid)
        this.setState({
            ...this.state,
            catename:this.state.cateList[i].catename,
        })
    }
    async joinCart(id) {
        let res = await cartadd({uid:this.uid,type:2,goodsid:id,num:1})
        alert(res.msg)
    }
    render() {
        let { cateList,catename,goodsList } = this.state
        console.log(cateList);
        return (
            <div id="sort">
                <Top title={this.state.title}></Top>

                {/* <!-- 搜索栏 --> */}
                <nav className="nav">
                    <form className="nav-search">
                        <i className="iconfont icon-sousuo"></i>
                        <input type="search" placeholder="按内容搜索" />
                    </form>
                </nav>
                {/* <!-- 中间内容 --> */}
                <article className="content">
                    {/* <!-- 左侧导航栏 --> */}
                    <section className="sortNav">
                        <ul>
                            {
                                cateList.map((item,idx) =>
                                    <li onClick={()=>this.changeGoods(item.id,idx)} key={item.id}>
                                        {item.catename}
                                    </li>
                                )
                            }
                        </ul>
                    </section>
                    <section className="sortRight">
                        <section className="con-goods">
                            <h4>{catename}</h4>
                            {
                                goodsList.map(item =>
                                    <ul className="goods" key={item.id}>
                                        <li>
                                            <img src={this.url+item.img} alt="" />
                                        </li>
                                        <li>
                                            <p>{item.goodsname}</p>
                                            <p>现价格: ￥{item.price}</p>
                                            <p>原价格: ￥{item.market_price}</p>
                                            <button className="active" onClick={()=>this.joinCart(item.id)}>立即抢购</button>
                                            <p>{item.description}</p>
                                        </li>
                                    </ul>
                                )
                            }
                            {/* <!-- 用来进行锚点导航链接 把css样式设置下来一些，这样就不会被导航栏挡住 --> */}
                            <i className="navTo"></i>
                        </section>
                    </section>
                </article>
            </div>
        );
    }
}
